<template>
  <view class="login-container">
    <view class="logo-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">健康之旅</text>
    </view>
    
    <form class="login-form">
      <view class="input-group">
        <view style="position: relative; width: 100%;">
          <input
            type="text"
            style="width: 100%; height: 80rpx; border: 1px solid #ddd; padding: 0 20rpx; box-sizing: border-box;"
            placeholder="请输入用户名或邮箱"
            v-model="formData.username"
          />
        </view>
        <text v-if="errors.username" class="error-message">{{ errors.username }}</text>
      </view>
      
      <view class="input-group">
        <view style="position: relative; width: 100%;">
          <input
            :type="passwordVisible ? 'text' : 'password'"
            style="width: 100%; height: 80rpx; border: 1px solid #ddd; padding: 0 20rpx; padding-right: 80rpx; box-sizing: border-box;"
            placeholder="请输入密码"
            v-model="formData.password"
          />
          <view 
            style="position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;"
          >
            <text 
              class="password-toggle-btn"
              @click="togglePasswordVisible"
            >
              {{ passwordVisible ? '隐藏' : '显示' }}
            </text>
          </view>
        </view>
        <text v-if="errors.password" class="error-message">{{ errors.password }}</text>
      </view>
      
      <view class="form-actions">
        <view class="remember-forgot">
          <view class="remember-me">
            <checkbox value="true" class="checkbox" :checked="formData.rememberMe" @change="onRememberMeChange" />记住我
          </view>
          <text class="forgot-password" @tap="goToForgotPassword">忘记密码？</text>
        </view>
        
        <button class="login-button" @tap="handleSubmit" :disabled="isSubmitting">
          {{ isSubmitting ? '登录中...' : '登录' }}
        </button>
        
        <view class="register-link">
          <text>还没有账号？</text>
          <text class="link" @tap="goToRegister">立即注册</text>
        </view>
      </view>
    </form>
    
    <view class="agreement-section">
      <text class="agreement-text">
        登录即表示您同意我们的
        <text class="agreement-link" @tap="goToAgreement">《用户协议》</text>
        和
        <text class="agreement-link" @tap="goToPrivacy">《隐私政策》</text>
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        rememberMe: false
      },
      errors: {
        username: '',
        password: ''
      },
      isSubmitting: false,
      passwordVisible: false
    }
  },
  methods: {
    // 切换密码可见性
    togglePasswordVisible() {
      this.passwordVisible = !this.passwordVisible
    },
    
    // 处理记住我复选框变化
    onRememberMeChange(e) {
      this.formData.rememberMe = e.detail.checked
    },
    
    // 表单验证
    validateForm() {
      let isValid = true
      
      // 清空之前的错误信息
      this.errors = {
        username: '',
        password: ''
      }
      
      // 验证用户名
      if (!this.formData.username.trim()) {
        this.errors.username = '请输入用户名或邮箱'
        isValid = false
      } else if (!this.isValidUsername(this.formData.username.trim())) {
        this.errors.username = '请输入有效的用户名或邮箱'
        isValid = false
      }
      
      // 验证密码
      if (!this.formData.password) {
        this.errors.password = '请输入密码'
        isValid = false
      } else if (this.formData.password.length < 6) {
        this.errors.password = '密码长度不能少于6位'
        isValid = false
      }
      
      return isValid
    },
    
    // 验证用户名/邮箱格式
    isValidUsername(username) {
      // 简单验证，可以是纯字母数字或邮箱格式
      const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      return usernameRegex.test(username) || emailRegex.test(username)
    },
    
    // 处理登录提交
    async handleSubmit() {
      // 验证表单
      if (!this.validateForm()) {
        return
      }
      
      this.isSubmitting = true
      
      try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 这里应该是实际的登录API调用
        console.log('登录请求数据:', this.formData)
        
        // 模拟登录成功
        const loginSuccess = true
        
        if (loginSuccess) {
          // 如果选择了记住我，可以存储用户信息到本地
          if (this.formData.rememberMe) {
            uni.setStorageSync('userInfo', {
              username: this.formData.username
            })
          }
          
          // 登录成功后跳转到首页
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1500)
        } else {
          // 登录失败
          uni.showToast({
            title: '用户名或密码错误',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
          title: '登录失败，请稍后重试',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
      }
    },
    
    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    
    // 跳转到忘记密码页面
    goToForgotPassword() {
      // 这里可以添加忘记密码页面的跳转
      uni.showToast({
        title: '忘记密码功能开发中',
        icon: 'none'
      })
    },
    
    // 跳转到用户协议页面
    goToAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    },
    
    // 跳转到隐私政策页面
    goToPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      })
    }
  },
  onLoad() {
    // 页面加载时，可以检查是否有存储的用户信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.username) {
      this.formData.username = userInfo.username
      this.formData.rememberMe = true
    }
  }
}
</script>

<style>
/* 页面容器 */
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 40rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(126, 166, 129, 1) 0%, rgba(193, 223, 196, 1) 100%);
}

/* Logo和应用名 */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 55rpx;
  font-weight: bold;
  color: #333333;
}

/* 登录表单 */
.login-form {
  width: 100%;
}

/* 输入组 */
.input-group {
  margin-bottom: 30rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  height: 96rpx;
  position: relative;
  border: 2rpx solid #e0e0e0;
}

.input-wrapper:focus-within {
  border-color: #07c160;
}

.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.input-field {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333333;
  background-color: transparent;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
}

.input-field:focus {
  outline: none;
}

.placeholder-text {
  color: #999999;
  font-size: 32rpx;
}

/* 密码切换 */
.password-toggle {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

toggle-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 密码显示切换按钮 */
.password-toggle-btn {
  color: #1989fa;
  font-size: 32rpx;
  font-weight: bold;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
  min-width: 80rpx;
  text-align: center;
}

/* 错误提示 */
.error-message {
  display: block;
  color: #e64340;
  font-size: 26rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
}

/* 表单操作 */
.form-actions {
  margin-top: 60rpx;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.remember-me {
  display: flex;
  align-items: center;
}

.checkbox {
  transform: scale(0.8);
}

.forgot-password {
  color: #07c160;
  font-size: 28rpx;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 96rpx;
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  line-height: 96rpx;
  margin-bottom: 40rpx;
}

.login-button:active {
  opacity: 0.8;
}

.login-button:disabled {
  background-color: #cccccc;
  color: #ffffff;
}

/* 注册链接 */
.register-link {
  text-align: center;
  font-size: 28rpx;
  color: #666666;
}

.link {
  color: #07c160;
  margin-left: 10rpx;
}

/* 协议部分 */
.agreement-section {
  margin-top: auto;
  margin-bottom: 40rpx;
}

.agreement-text {
  display: block;
  text-align: center;
  font-size: 26rpx;
  color: #999999;
  line-height: 1.6;
}

.agreement-link {
  color: #07c160;
}
</style>